<template>
  <div class="pad-40 bg-hui">
    <div v-if="listDataShow.length!=0">
      <van-pull-refresh class="min-heigh" v-model="isLoading" @refresh="onRefresh">
        <div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- 每一张信用卡 -->
            <div :key="key" v-for="(val,key) in listData" class="bg-fff card-box">
              <div class="pad-l-20 pad-r-20 f-13 oh pad-t-10 pad-b-10">
                <div class="c-hui fl">
                  计划编号：
                  <span>{{val.id}}</span>
                </div>
                <div v-if="val.state==0" class="c-hui fr pr red dot-bth dot-red">失败</div>
                <div v-if="val.state==1" class="c-hui fr pr blue dot-bth dot-blue">执行中</div>
                <div v-if="val.state==2" class="c-hui fr pr green dot-bth dot-green">成功</div>
                <div v-if="val.state==3" class="c-hui fr pr red dot-bth dot-red">中断</div>
              </div>
              <div class="line-hui"></div>
              <div class="pad-20" @click="pageJum(val)">
                <!-- 计划编号 -->
                <div class="fiex">
                  <div class="bank-log">
                    <img :src="val.bankCode  | fmtBankimsrc" :onerror="commonConfig.errorImg" />
                  </div>
                  <div class="mag-l-10 f-32 c000">
                    <span>{{val.bankName}}</span>
                    <span>【{{val.cardNo| fmtCardNo}}】</span>
                  </div>
                </div>
                <!-- 计划编号 end-->

                <!-- 还款金额 -->
                <div class="mag-t-20">
                  <div class="fiex center">
                    <div class="fiex1 blue">
                      <p class="f-22">总还款金额</p>
                      <p class="f-32">{{val.totalRepaymentPrice|fmtAmount}}</p>
                    </div>
                    <div class="fiex1">
                      <p class="f-22 c1c1">预留金额</p>
                      <p class="f-32 c94">{{val.reservePrice|fmtAmount}}</p>
                    </div>
                    <div class="fiex1">
                      <p class="f-22 c1c1">已还款</p>
                      <p class="f-32 c94">{{val.alreadyRepaymentPrice|fmtAmount}}</p>
                    </div>
                    <div class="fiex1">
                      <p class="f-22 c1c1">手续费</p>
                      <p class="f-32 c94">{{val.totalFee|fmtAmount}}</p>
                    </div>
                    <div class>
                      <van-icon name="arrow" />
                    </div>
                  </div>
                </div>
                <!-- 还款金额end -->
              </div>
              <!-- 制定时间 -->
              <div class="time-line">
                <div class="line-hui"></div>
              </div>
              <div class="pad-l-20 pad-r-20 f-13 oh pad-b-10 c1c1">
                <div class="fl">
                  制定时间：
                  <span>{{new Date(val.createDate).format('yyyy-MM-dd hh:mm:ss')}}</span>
                </div>
                <div v-if="val.state==1" class="fr pr">
                  <div @click="interrupt(val)" class="zd-btn">中断</div>
                </div>
              </div>
              <!-- 制定时间end -->
            </div>
            <!-- 每一张信用卡 end-->
            <div class="bottom-box-h"></div>
          </van-list>
        </div>
      </van-pull-refresh>
    </div>
    <div class="center" v-else>
      <NODAT></NODAT>
    </div>
    <!-- <div class="foot-box fiex center">
      <div @click="selFootFun(2)" :class="{'sel':selFoot==1}" class="fiex1">制定计划</div>
      <div class="foot-l"></div>
      <div :class="{'sel':selFoot==2}" class="fiex1">计划查询</div>
    </div> -->
    <!-- 筛选 -->
    <van-popup v-model="Screen.show"  position="bottom">
         <Screen  @closeScreenChild="closeSearchWin" />
    </van-popup>
    <div @click="openSearchWin()" class="sreen-btn" :class="{'search-tip':searchTip}">
        <div class="sreen-box center">
            <van-icon name="filter-o" class="mag-t-30"/>
        </div>
    </div>
  </div>
</template>
<script>
var $th = "";
import NODAT from "@/components/NoData.vue";
import Screen from "@/views/Screen/index.vue";
import { async } from "q";
export default {
  components: {
    NODAT,
    Screen
  },
  data() {
    return {
      Screen:{
        show:false,
      },
      selFoot: 2,
      listDataShow:["1"],
      count: 0, //刷新次数
      isLoading: false, //刷新状态
      loading: false,
      finished: false,
      stopplan: false,
      tostopa: false,
      tostop: false,
      isActive: false,
      // isshowtext:false,
      list: "光大银行",
      sendData: {
        token: localStorage.getItem("token"),
        state:"", //状态 0: 失败 1:执行中 2:成功 3:中断
        cardId:""
      },
      listData: [],
      pageSet: {
        pageSize: 10,
        pageNum: 1, //当前页码
        total: 0,
        pages: 0
      },
      searchTip:true
    };
  },
  created() {
    // this.show()
  },
  mounted() {
    $th = this;
    var scroll = "";
     $(window).scroll(function () {
       clearTimeout(scroll);
         $th.searchTip = false;
       scroll = setTimeout(function(){
          $th.searchTip = true;
       },300)
     })
  },
  methods: {
    openSearchWin(){ //开启筛选弹窗
      this.Screen.show = true;
    },
    closeSearchWin(req){ //关闭筛选弹窗
    // 选择的银行卡
      if(req.cardList){
          $th.sendData.cardId = "";
          $.each(req.cardList,function(key,val){
              $th.sendData.cardId = key;
          })
      }else{
          $th.sendData.cardId = "";
      }
        // 选择的执行状态
       if(req.typeList){
           $th.sendData.state = "";
           $.each(req.typeList,function(key,val){
              $th.sendData.state = key;
          })
      }else{
           $th.sendData.state = "";
      }
      //查询
      this.listData = [];
      this.pageSet.pageNum = 1;
      this.Screen.show = false;
      this.onLoad(); //重新加载数据
    },
    selFootFun() {
      $th.$router.push("/dzx");
    },
    pageJum(val) {
      localStorage.setItem("planId", val.id);
      setTimeout(() => {
        $th.$router.push("/jhDetail?planId=" + val.id);
      }, 100);
    },
    interrupt(val) {
      //中断计划
      $th.$dialog
        .confirm({
          title: "提示",
          message: "是否中断当前计划"
        })
        .then(() => {
          sendDataFun();
          async function sendDataFun() {
            var cardDetial = await $th.$axiosFun(
              "/plan/plan/breakPlan",
              {
                customerId: val.customerId,
                planId: val.id,
              },
              "get"
            );
            console.log("cardDetial", cardDetial);
            if (cardDetial.code == 1000) {
              val.state = 3;
              $th.$toast("中断成功");
            } else {
              $th.$toast(cardDetial.message);
            }
          }

          // on confirm
        })
        .catch(() => {
          // on cancel
        });
      console.log("中断计划", val);
    },
    async onLoad() {
      var sendData = {};
      sendData = $.extend(true, $th.sendData, $th.pageSet);
      $th.$toast("加载成功");
      var reqData = await $th.$axiosFun(
        "/plan/plan/getPlanPage",
        sendData,
        "get"
      );
      if (reqData.code == 1000) {
        $th.pageSet.pageNum++;
        $th.sendData.total = reqData.data.total; //总条数
        $th.sendData.pages = reqData.data.pages; //总页数
        $th.sendData.pageNum = reqData.data.pageNum; //当前页码
        $th.listData = $th.listData.concat(reqData.data.list); //加载当前数据
        // 加载状态结束
        $th.loading = false;
        // // 数据全部加载完成
        if ($th.listData.length >= $th.sendData.total) {
          $th.finished = true;
        }
      } else {
        $th.listData = [];
        $th.listDataShow = []; //隐藏数据
        $th.finished = true;
        $th.$toast(reqData.message);
      }
    },
    async init() {
      //加载数据

      var reqData = await $th.$axiosFun(
        "/plan/plan/getPage",
        {
          token: $th.$store.state.token
        },
        "get"
      );

      console.log("reqData", reqData);
    },
    async getData() {
      //获取数据
    },
    onRefresh() {
      setTimeout(() => {
        $th.getcardlist();
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
    isshow() {
      this.stopplan = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.sreen-box{background: #fff; width: 1.32rem; height: 1.32rem;  border-radius: 100%; overflow: hidden; box-shadow:0px 0px 3px 3px rgba(245, 241, 241, 0.8)}
.sreen-btn{position: fixed; bottom: 2rem; z-index: 2;font-size: 0.8rem;right: -0.7rem; transition: all 0.5s;}
.sreen-btn.search-tip{ right: 0.5rem;}

.foot-box .sel {
  color: #4f8bf4;
}
.foot-box {
  left: 0;
  background: #fff;
  z-index: 2;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 15px 0;
  box-shadow: 0px -2px 3px 3px rgba(245, 241, 241, 0.8);
}
.foot-l {
  height: 20px;
  border-right: 1px solid #cccc;
}
.zd-btn {
  color: #4f8bf4ff;
  border: 1px solid #4f8bf4ff;
  border-radius: 20px;
  padding: 0.05rem 0.3rem;
}
.time-line {
  padding: 0.2rem 0;
  position: relative;
}
.time-line::after {
  content: "";
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  background: #f7f7f7;
  border-radius: 100%;
  position: absolute;
  left: -0.1rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
.time-line::before {
  content: "";
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  background: #f7f7f7;
  border-radius: 100%;
  position: absolute;
  right: -0.1rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
.bank-log {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 100%;
}
.bank-log img {
  width: 100%;
  height: 100%;
}
.card-box {
  border-radius: 5px;
  margin-bottom: 0.2rem;
}
.cardlist {
  width: 90%;
  margin: 10px auto;
  background: #cccccc;
  position: relative;
  border-radius: 10px;
  line-height: 46px;
  font-size: 16px;
  color: white;
}
.Avtive {
  width: 100%;
  z-index: 10;
  position: absolute;
  height: 100%;
  border-radius: 10px;
  line-height: 200px;
  background: url("http://hstatic.1818pay.cn/image/disable/jtmb@2x.png")
    no-repeat;
  background-position: 100% 100%;
  background-size: 125% 100%;
}
.showtext {
  width: 100%;
  // position: absolute;
  top: 40px;
  width: 100%;
  background: white;
  color: rgb(78, 78, 78);
  height: 20px;
  line-height: 20px;
}
.w9mau {
  width: 90%;
  margin: 0 auto;
}

.zxzbg {
  background: url("http://hstatic.1818pay.cn/image/icon/cl1.png");
  background-size: cover;
}

.zxzbg1 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl3.png");
  background-size: cover;
}

.zxzbg2 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl2.png");
  background-size: cover;
}

.zxzbg3 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl4.png");
  background-size: cover;
}

.blanklogobg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  text-align: center;
  float: left;
  margin: 10px;
  line-height: 20px;
}

.blanklogobg img {
  width: 20px;
  margin-top: 2px;
}

.dzx {
  float: right;
  margin: 10px;
  font-size: 14px;
  line-height: 30px;
  background: #fff;
  color: #4f8bf4ff;
  text-align: center;
  width: 70px;
  border-radius: 30px;
}

.zdr {
  font-size: 12px;
  color: #fff;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.zdjh {
  width: 115px;
  height: 35px;
  float: right;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  line-height: 30px;
  text-align: center;
  color: #67728f;
  margin: 20px 20px;
  margin-top: 10px;
  margin-bottom: 15px;
  border: none;
}

.van-progress {
  height: 10px;
  background-color: white;
  border-radius: 8px;
}
</style>